<template>
 <div id="demo">
       <div class='demotop'>
        <el-form :inline="true"   size="mini" class="demo-form-inline">
          <!--日期-->
          <el-form-item label="日期">
            <el-date-picker
                    v-model="selTime"
                    type="daterange"
                    range-separator="-"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
          </el-form-item>
         <!--题目类型-->
          <el-form-item label="题目类型">
             <el-select v-model="questionType" placeholder="请选择" multiple>
                <el-option
                v-for="item in questionTypeTM"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
             </el-select>
          </el-form-item>
          <!--知识点-->
          <el-form-item label="知识点">
           
              <el-select
                  v-model="knowledgePoint"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入知识点"
                  :remote-method="getknoData"
                
                  >
                  <el-option
                    v-for="item in knowledgePointTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>
           <!--编辑老师-->
          <el-form-item label="编辑老师">
            <el-select
                  v-model="teacher"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入老师名字"
                  :remote-method="getteacher"            
                  >
                  <el-option
                    v-for="item in teacherTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>
           <!--检查老师-->
          <el-form-item label="检查老师">
            <el-select
                  v-model="teacherCheck"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入老师检查老师"
                  :remote-method="getteacher"            
                  >
                  <el-option
                    v-for="item in teacherTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>
          <!--审核⽼师-->
          <el-form-item label="审核老师">
            <el-select
                  v-model="teacherReview"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入老师审核老师"
                  :remote-method="getteacher"            
                  >
                  <el-option
                    v-for="item in teacherTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>


         <!--题目-->
          <el-form-item label="题目">
            <el-input v-model="TMtitle"></el-input>
          </el-form-item>
           <!--题目状态-->
         <el-form-item label="题目状态">
                <el-select v-model="questionStatus" placeholder="请选择">
                  <el-option
                    v-for="item in questionStatusTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="抽检状态">
          <el-select v-model="qualifiedStatus" clearable>
            <el-option label="未抽检" value="0" />
            <el-option label="抽检中" value="1" />
            <el-option label="不合格" value="2" />
            <el-option label="合格" value="3" />
          </el-select>
        </el-form-item>
          <!--所属学科-->
         <el-form-item label="所属学科">
              <el-select v-model="subject" placeholder="请选择" multiple>
                  <el-option
                    v-for="item in subjectTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </el-form-item>
          <!--考试类型-->
         <el-form-item label="考试类型">
            <el-select v-model="examType" placeholder="请选择" multiple>
                <el-option
                  v-for="item in examTypeTM"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
          </el-form-item>
         <!--学段-->
         <el-form-item label="学段">
              <el-select v-model="level" placeholder="请选择" multiple>
                  <el-option
                    v-for="item in levelTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </el-form-item>
           <!--地区-->
         <el-form-item label="地区">
                <el-select
                  v-model="area"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择"
                  :remote-method="remoteMethod"
               
                  multiple
                  >
                 <el-option
                    v-for="item in addressTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>       
          </el-form-item>
         <el-form-item>
          <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
           <el-button
            size="mini"
            icon="el-icon-refresh-right" @click='regest' >重置</el-button>
        </el-form-item>
     </el-form>

   </div>
           <!--上线下线到处-->
        <div class='SJlogoout'>
          <el-button-group>
              <el-button type="primary" size='mini'  @click='getreject' icon="el-icon-caret-top">驳回审核</el-button>
          </el-button-group>
           </div>
           <!--表单-->
             <div style='margin:30px;'> 
             <el-table
                  ref="multipleTable"
                  :data="arr"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    label="题目ID"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目"
                    width="300"
                    show-overflow-tooltip>
                     <template slot-scope="scope">{{ scope.row.title }}</template>
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="题目类型"
                    >
                     <template slot-scope="scope">
                      <span v-if="scope.row.type==1">单选题</span>
                      <span v-if="scope.row.type==2">多选题</span>
                      <span v-if="scope.row.type==3">判断题</span>
                      <span v-if="scope.row.type==4">情景题</span>
                      <span v-if="scope.row.type==5">简答题</span>
                      <span v-if="scope.row.type==6">辨析题</span>
                      <span v-if="scope.row.type==7">填空</span>
                      <span v-if="scope.row.type==8">完形填空</span>
                      <span v-if="scope.row.type==9">阅读理解</span>
                      <span v-if="scope.row.type==10">背景题</span>
                    </template>

                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="难度"
                   >
                     <template slot-scope="scope">{{ scope.row.difficultyLevel }}分</template>
                   
                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="创建时间"
                    >
                     <template slot-scope="scope">{{ scope.row.ctime  | dateFormat }}</template>
                  </el-table-column>
                   <el-table-column
                    prop=""
                    label="题目状态"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.status==0">{{scope.row.editPeople}}-编辑中</el-tag>
                      <el-tag v-if="scope.row.status==1">上线</el-tag>
                      <el-tag type="danger" v-if="scope.row.status==2">下线</el-tag>
                      <el-tag  type="warning" v-if="scope.row.status==3">{{scope.row.checkPeople}}-校验中</el-tag>
                      <el-tag v-if="scope.row.status==4">{{scope.row.reviewPeople}}审核中</el-tag>
                      <el-tag type="success" v-if="scope.row.status==5">已审核</el-tag>
                    </template>
                   
                  </el-table-column>
                  <el-table-column
                    prop=""
                    label="抽检状态"
                   >
                    <template slot-scope="scope">
                      <el-tag type="info" v-if="scope.row.qualifiedStatus==0">未抽检</el-tag>
                      <el-tag v-if="scope.row.qualifiedStatus==1">抽检中</el-tag>
                      <el-tag type="danger" v-if="scope.row.qualifiedStatus==2">不合格</el-tag>
                      <el-tag type="success" v-if="scope.row.qualifiedStatus==3">合格</el-tag>
                    </template>                   
                  </el-table-column>
                  <el-table-column
                      v-if="activeName==='1'"
                      class-name="status-col"
                      align="center"
                      label="编辑状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.editStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.editStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='2'"
                      class-name="status-col"
                      align="center"
                      label="校验状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.checkStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.checkStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-else-if="activeName==='3'"
                      class-name="status-col"
                      align="center"
                      label="审核状态"
                      width="110px"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.reviewStatus===0" type="info">暂存</el-tag>
                        <el-tag v-else-if="scope.row.reviewStatus===1" type="success">已提交</el-tag>
                        <el-tag v-else type="danger">驳回</el-tag>
                      </template>
                    </el-table-column>
                     <el-table-column align="center"
                      prop=""
                      label="上线状态"
                    >
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.onlineStatus===0" type="info">下线</el-tag>
                        <el-tag v-if="scope.row.onlineStatus===1" type="success">上线</el-tag>
                      
                      </template>
                    </el-table-column>
                   <el-table-column
                    prop="editPeople"
                    label="编辑人"
                   >
                  </el-table-column>
                   <el-table-column
                    prop="checkPeople"
                    label="检查人"
                    >
                  </el-table-column>
                   <el-table-column
                    prop="reviewPeople"
                    label="审核人"
                    >
                  </el-table-column>
                    <el-table-column
                    prop=""
                    label="查看"
                    >
                     <template slot-scope="scope">
                        <router-link
                        :to="{
                          path:'/questionInfo',
                          query:{
                            id:scope.row.id,
                            activeName:0
                          }
                        }"
                      >
                        <el-button type="primary" size="mini">查看</el-button>
                      </router-link>
                     
                      </template>
                  </el-table-column>
                </el-table>
               </div> 
           <!--表单end-->
           <!--分页--> 
          <el-row class="page">
                <el-pagination background layout="prev, pager, next" :total="total"  :current-page.sync="pageNo"
                   :page-size="pageSize"  @current-change='currchange'>
              </el-pagination>
         </el-row>  
         <!--分页end--> 
    
			
        </div>
</template>

<script>
import { Loading } from 'element-ui';
import __Config from '../../api/config';//实际路径
export default {
  name: "TMget",
  filters: {

  },
  data() {
    return {
    TMtitle:"",//题⽬
    questionType:[],//题⽬类型Array
    questionTypeTM:[],
    selTime:"",//时间
    knowledgePoint:[],//Array 知识点(key)
    knowledgePointTM:[],

    subjectTM:[], //Array 所属学科
    subject:[],
    examTypeTM:[], //Array 考试类型
    examType:[],
    levelTM:[], //Array 学段
    level:[],
    questionStatusTM:[], //Array 题⽬状态
    qualifiedStatus:"",//抽检状态
    questionStatus:"",
    area:[],//Array 地区
    addressTM:[],
    teacherTM:[],//老师
    teacher:"",
    pageNo:1,//页码
    pageSize:8,//数量
    total:null,

    arr:[],
    checked:false,
    tableData: [],
    StarData:"",
    endData:"",
    multipleSelection: [],
    ids:[],////K选中题目ID的数组
    activeName:"1",
    teacherCheck:"",//检查老师
    teacherReview:"",//审核老师
    };
  },
 
  created() {
     this.activeName = this.$store.getters.role === 1 ? "0" : "1";
    if (this.activeName === "1" && (this.$store.getters.permission & 1) <= 0) {
      this.activeName = "2";
    }
    if (this.activeName === "2" && (this.$store.getters.permission & 2) <= 0) {
      this.activeName = "3";
    }
   
      this.getserchinfo();
      this.onserch();
  },
  methods: {

        onserch(){
          let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
          if(this.selTime==null){
            this.selTime= [];
            this.StarData="";
            this.endData="";
          }else{
            var times = this.selTime;
            this.StarData  = times[0];
            this.endData = times[1];
          }
        
       
           this.$axios({
              method:'post',
              url: __Config.api.getexamPaper,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
              },
              data:{
                startTime:this.StarData,
                endTime:this.endData,
                subject:this.subject,//Array 否 所属学科(key)
                examType:this.examType,//Array 否 考试类型(key)
                level:this.level,//Array 否 学段(key)
                area:this.area,//Array 否 地区(key)
                questionType:this.questionType ,//Array 否 题⽬类型(key)
                questionStatus:this.questionStatus,//string 否 题⽬状态(key)
                knowledgePoint:this.knowledgePoint,//Array 否 知识点(key)
                teacher:this.teacher ,//string 否 ⽼师(key)
                title:this.TMtitle,//string 否 题⽬名称
                teacherCheck:this.teacherCheck, //检查⽼师
                teacherReview:this.teacherReview,//审核老师
                qualifiedStatus:this.qualifiedStatus,//抽检状态
              }
              }).then((res)=>{
                  // console.log(res)
                   this.arr = res.data.data;
                   this.total = res.data.page.total;
                   loadingInstance.close();
              }).then((err)=>{
                 loadingInstance.close();
                  console.log(err)
              })

        },


         //getTminfo 4.题⽬管理获取题⽬管理数据字典


        getserchinfo(){
       
             this.$axios({
              method:'get',
              url: __Config.api.getTminfo,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{ }
              }).then((res)=>{  
                 console.log(res) 
                 this.subjectTM= res.data.data.subject;// Array 所属学科
                 this.examTypeTM = res.data.data.examType;//Array 考试类型
                 this.levelTM = res.data.data.level;//Array 学段
                 this.questionTypeTM = res.data.data.questionType;//Array 题⽬类型
                 this.questionStatusTM = res.data.data.questionStatus;//Array 题⽬状态  

              }).then((err)=>{
                  console.log(err)
              })
        },

        remoteMethod(query) {  
            this.$axios({
              method:'get',
              url: __Config.api.getAddress,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                   this.addressTM=res.data.data;
              }).then((err)=>{
                  console.log(err)
              })
          },


        //老师查询
          getteacher(query) {   
            this.$axios({
              method:'get',
              url: __Config.api.teachers,
              headers: {
                'Authorization':  this.$store.getters.token //设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                   this.teacherTM=res.data.data;
              }).then((err)=>{
                  console.log(err)
              })

          },

        //getknowledgePoint知识点
         getknoData(query){
           this.$axios({
              method:'get',
              url: __Config.api.getknowledgePoint,
              headers: {
                'Authorization':  this.$store.getters.token //设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                  // console.log(res)
                   this.knowledgePointTM=res.data.data;
              }).then((err)=>{
                  console.log(err)
              })

         },

           currchange(e){
                this.pageNo=e;
                this.onserch();

            },
    //多选单选 
         handleSelectionChange(val){
             this.multipleSelection= val;
          },
     
         //sha //ReviewMultiple
         getreject(){
            if(this.multipleSelection.length==0){
                this.$message({
                message: "至少选择一个知识点",
                  type: 'warning'
              });
            }else{
              let options={
              background:"rgba(0, 0, 0, 0.8)",
              text:"加载中"
              }
              let loadingInstance = Loading.service(options);
             this.ids=   this.multipleSelection.map(function(item) {
                 return item.id
            })
             var arr= this.ids.toString();
             let idss = arr.replace(/\[|]/g,'');//移除字符串中的所有[]括号
             this.$axios({
              method:'post',
              url: __Config.api.ReviewMultiple,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                questionIds:idss,
              }
              }).then((res)=>{
                
               loadingInstance.close();
                this.onserch();
               this.$message({
                message: res.data.msg,
                type: 'success'
              });
             
              }).catch((err)=>{
                 this.onserch();
                  loadingInstance.close();
                 this.$message({
                  message: err.response.data.msg,
                  type: 'warning'
                });
              })
           }
         },
  //重置
       regest(){
         this.selTime=[];
         this.questionType=[];
         this.knowledgePoint="";
         this.teacher="";
         this.TMtitle="";
         this.questionStatus="";
         this.subject=[];
         this.examType=[];
         this.level=[];
         this.area=[];
         this.teacherCheck='';
         this.teacherReview='';
         this.qualifiedStatus='';
         this.onserch();
       }
       
  }
};
</script>

<style >
#demo{
  font-size:14px;
}
.thead{
  display:flex;
  width:95%;
  margin:20px auto 0px auto;
  border:1px solid #DCDFE6;
   height: 40px;
  overflow: hidden;
}
.thd{
    border-right:1px solid #DCDFE6;
 
    line-height: 40px;
    text-align: center;
}
.lsthd{
   height: 40px;
    line-height: 40px;
    text-align: center;
}
.dataliat{
  
}
.list{
 display:flex;
 
    width:95%;
    margin:0px auto;
    border:1px solid #DCDFE6;
    border-top:0x;
    background:#fff;
}
.content{
     width:95%;
     margin:10px auto;
}
.cell{
  text-align:center
}
.demotop{
  width:95%;
  margin:20px auto;
}
.paperTitle{
  width:90px;
  line-height:40px;
  display:block;
}
.SJlogoout{
   width:95%;
   margin:10px auto;
}
.mr30{
  margin-top:30px;
}
.page{
  margin:30px;
}
</style>
